var dragged;
var origine;
var out = false;

  /* events fired on the draggable target */
 document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      origine = dragged.parentElement;
      // make it half transparent
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.id == "Team" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      dropSkill(event);
      // move dragged elem to the selected drop target      
    
  }, false);

function dropSkill(event) {
	event.preventDefault();
	target = event.target
	var dock = getDock(target);
	if (dock != null) {
		dock.appendChild(attachDiv(dragged));
		if (out == false) {
			setValue(dragged);
		}
	}
}

function getDock(target) {
	out = false;
	switch (target.tagName) {
	case 'IMG':
		if (target.parentElement.tagName='DIV' && target.parentElement.className.substr(0,4) == 'tank') {
			dropAll();
			return null;
		}
		else if (target.parentElement.tagName='DIV' && target.parentElement.className == 'competences') {
			var dock = document.getElementById(dragged.id.substr(0, dragged.id.indexOf('#')));
			return dock;
		}
		else {
			var dock = document.getElementById(dragged.id.substr(0, dragged.id.indexOf('#')));
			out = true;
			return dock.parentElement;
		}
		break;
	case 'DIV':
		if (target.className.substr(0,4) == 'tank') {
			dropAll();
			return null;
		}
		else if (target.className == 'competences') {
			var dock = document.getElementById(dragged.id.substr(0, dragged.id.indexOf('#')));
			return dock;
		}
		else {
			var dock = document.getElementById(dragged.id.substr(0, dragged.id.indexOf('#')));
			out = true;
			return dock.parentElement;
		}
		break;
	default:
		var dock = document.getElementById(dragged.id.substr(0, dragged.id.indexOf('#')));
		out = true;
		return dock.parentElement;
		break;
	}
	
}

function dropAll() {
	var skills = new Array();
	var docks = document.getElementsByClassName('competences');
	var skill = dragged.id.substr(dragged.id.indexOf('#')+1);
	for (i=0; i < docks.length; i++){
		var dropSkill = document.getElementById(docks[i].id+'#'+skill);
		if(dropSkill != null) {
			docks[i].appendChild(attachDiv(dropSkill));
			skills[i] = dropSkill;
			setValue(dropSkill);
		}
	}
	
}

function attachDiv(skill) {
	if (out == false) {
		var div = document.createElement('div');
		var span = document.createElement('input');
		var input = document.getElementsByName(skill.id)
		if (input.length == 1) {
			input[0].parentElement.parentElement.removeChild(input[0].parentElement);
		}
		span.type="text";
		span.name=skill.id;
		div.className = "pourcent";
		div.appendChild(skill);
		div.appendChild(span);
		return div;
	}
	else {
		if (skill.parentElement.parentElement.className == 'competences') {
			skill.parentElement.parentElement.removeChild(skill.parentElement);
		}
	}
	return skill;
}

function setValue(skill) {	
	var dock = skill.parentElement.parentElement;
	for (k = 0; k < dock.children.length-1; k++) {
		if (dock.children[k].className == "pourcent") {
			dock.children[k].children[1].value = '100';
		}
	}
}